<template>
  <div>
    <el-row>
      <el-col :span="12">
        <v-chart :options="chartOptions" autoresize></v-chart>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import { use } from 'echarts/core';
import {
  CanvasRenderer,
  // 引入必要的组件
  BarChart,
  LineChart,
  PieChart,
  // 引入提示框和标题组件
  Tooltip,
  Title,
} from 'echarts/components';
import { vChart } from 'vue-echarts'; // 引入vue-echarts组件

// 注册必要的组件
use([
  CanvasRenderer,
  BarChart,
  LineChart,
  PieChart,
  Tooltip,
  Title,
]);

export default {
  components: {
    'v-chart': vChart,
  },
  data() {
    return {
      chartOptions: {
        xAxis: {
          type: 'category',
          data: ['Total Orders', 'Total Costs']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200],
            type: 'bar'
          }
        ]
      }
    };
  },
  mounted() {
    this.fetchStatistics();
  },
  methods: {
    async fetchStatistics() {
      await this.$axios.get('/stats')
          .then(response => {
            const stats = response.data;
            this.chartOptions.series[0].data = [stats.totalOrders, stats.totalCosts];
          })
          .catch(error => {
            console.error('Error fetching statistics:', error);
          });
    }
  }
}
</script>